<template>
  <div>
    <van-nav-bar class="ganavbar" :title="mode == 'view' ? '详情' : '新建案件'" left-arrow @click-left="$router.go(-1)">
    </van-nav-bar>
    <div class="mainbody" :class="mode">
      <!-- 通用的小标题 -->
      <div class="sub-title-len">案发情况</div>
        <van-field v-model="item.aymc" colon label="案由名称" :readonly="isReadOnly()"/>
        <van-field v-model="item.aybh" colon label="案由编号" :readonly="isReadOnly()"/>
        <van-field v-model="item.afsj" type="datetime-local" colon label="案发时间" :readonly="isReadOnly()"/>
        <van-field v-model="item.afdd" colon label="案发地点" class="address-input" readonly :placeholder="getPlaceHolder('地址', 1)"/>
        <van-field v-model="item.jjsm" colon label="简介说明" :readonly="isReadOnly()"/>

      <div class="sub-title-len">当事人信息</div>
        <van-field v-model="item.lx" colon label="类型" :readonly="isReadOnly()">
          <template #input>
            <van-radio-group v-if="!isReadOnly()" direction="horizontal" v-model="item.lx" name="" id="">
              <van-radio icon-size="16px" name="自然人">自然人</van-radio>
              <van-radio icon-size="16px" name="法人">法人</van-radio>
              <van-radio icon-size="16px" name="其他">其他</van-radio>
            </van-radio-group>
            <span v-else>{{item.lx}}</span>
          </template>
        </van-field>
        <van-field v-model="item.zjlb" colon label="证件类别">
          <template #input>
            <select v-if="!isReadOnly()" v-model="item.zjlb" name="" id="">
              <option value="身份证">身份证</option>
              <option value="军官证">军官证</option>
            </select>
            <span v-else>{{item.zjlb}}</span>
          </template>
        </van-field>

        <van-field v-model="item.zjh" colon label="证件号" :readonly="isReadOnly()"/>
        <van-field v-model="item.xm" colon label="姓名" :readonly="isReadOnly()"/>
        <van-field v-model="item.dz" colon label="地址" :readonly="isReadOnly()"/>
        <van-field v-model="item.dh" colon label="电话" :readonly="isReadOnly()"/>
        <van-field v-model="item.hjdz" colon label="户籍地址" :readonly="isReadOnly()"/>

      <div class="sub-title-len">处罚情况</div>
       <van-field v-model="item.cffs" colon label="处罚方式">
          <template #input>
            <van-radio-group v-if="!isReadOnly()" v-model="item.cffs" name="" id="">
              <van-radio icon-size="16px" name="警告">警告</van-radio>
              <van-radio icon-size="16px" name="罚款人民币">罚款人民币 <input type="text" v-model="item.cfje" style="width: 60px;"> 元 </van-radio>
            </van-radio-group>
            <span v-else>{{item.cffs}}</span>
          </template>
        </van-field>
        <van-field v-model="item.cflx" colon label="处罚类型">
          <template #input>
            <van-radio-group v-if="!isReadOnly()" direction="horizontal" v-model="item.cflx" name="" id="">
              <van-radio icon-size="16px" name="责令改正">责令改正</van-radio>
              <van-radio icon-size="16px" name="当场处罚">当场处罚</van-radio>
            </van-radio-group>
            <span v-else>{{item.cflx}}</span>
          </template>
        </van-field>
        <van-field class="zrgztzs" v-show="!isReadOnly()">
          <div slot="label" class="label">
            <img src="~static/imgs/zrgztzs.png" alt="">
            <span class="name">责令改正通知书</span>
            <van-button plain type="info" size="small" style="margin-left: 10px;padding: 0 20px;">编辑</van-button>
            <van-button plain type="info" size="small" style="margin-left: 10px;padding: 0 20px;">上传</van-button>
          </div>
        </van-field>

        <van-button type="info" block class="block-submit-button" v-show="!isReadOnly()">提交</van-button>
    </div>
  </div>
</template>
<script>
import ViewAndEdit from '@/mixins/ViewAndEdit';
export default {
  name: "JYCX_DETAIL",
  components: {
  },
  mixins: [ViewAndEdit],
  data () {
    return {
      item: '',
      fileList: {
        srhwzrs: [],
        yyzz: [],
        pwxkz: [],
        mdzmzp: []
      }
    };
  },
  methods: {
    getItemDetail (id) {
      var vm = this;
      vm.$getAndLoad('获取案件详情', 'getDetail.jsp?id=' + id, function (data) {
        data.aymc = '';
        data.aybh = '';
        data.afsj = '';
        data.afdd = '';
        data.jjsm = '';

        data.lx = '';
        data.zjlb = '身份证';
        data.zjh = '';
        data.xm = '';
        data.dz = '';
        data.dh = '';
        data.hjdz = '';

        data.cffs = '';
        data.cflx = '';
        data.cfje = '';
        vm.item = data;
      });
    }
  },
  mounted: function () {
    if (this.mode == 'view') {
      this.getItemDetail(this.$route.params.item.id);
    } else if (this.mode == 'add') {
      this.item = {
        aymc: '',
        aybh: '',
        afsj: '',
        afdd: '',
        jjsm: '',

        lx: '自然人',
        zjlb: '身份证',
        zjh: '',
        xm: '',
        dz: '',
        dh: '',
        hjdz: '',

        cffs: '',
        cflx: '',
        cfje: ''
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.zrgztzs {
  /deep/ .van-field__label {
    width: 100%;
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
